import React, {Component} from 'react';
import {Form, Icon, Input, Button, Checkbox} from 'antd';
import fetch from 'isomorphic-fetch';
import {BaseUrl} from "../../common/BaseUrl";
import * as base from "../../common/BaseUrl";


const FormItem = Form.Item;

class RegisterUserInfo extends Component {

    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                return;
            }
        });
        let name = document.getElementById("name").value;
        let userName = document.getElementById("userName").value;
        let password = document.getElementById("password").value;
        let formData = new FormData;
        formData.append("name", name);
        formData.append("userName", userName);
        formData.append("password", password);
        let url = BaseUrl + 'react/userInfo/register';
        fetch(url, {
            method: 'post',
            body: formData,
            header: base.headers,
            credentials: 'include',
            redirect: 'follow',
            mode: 'cors'
        }).then(res => res.json()).then(json => {
            console.log(json);
        })
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <Form onSubmit={this.handleSubmit} className="login-form">
                <FormItem>
                    {getFieldDecorator('name', {
                        rules: [{required: true, message: 'Please input your username!'}],
                    })(
                        <Input prefix={<Icon type="user" style={{fontSize: 13}}/>}
                               placeholder="Name" id="name"/>
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('userName', {
                        rules: [{required: true, message: 'Please input your username!'}],
                    })(
                        <Input prefix={<Icon type="user" style={{fontSize: 13}}/>}
                               placeholder="Username" id="userName"/>
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('password', {
                        rules: [{required: true, message: 'Please input your Password!'}],
                    })(
                        <Input prefix={<Icon type="lock" style={{fontSize: 13}}/>} type="password"
                               placeholder="Password" id="password"/>
                    )}
                </FormItem>
                <FormItem>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        register in
                    </Button>
                </FormItem>
            </Form>
        );
    }
}

let registerUserInfo = Form.create()(RegisterUserInfo);
export default registerUserInfo;
